<template>
	<view class="my">
		<view class="top-color">
			<!-- 登录 -->
			<view class="login" @click="handleLogin" v-if="!user">
				<view class="login-left"><image src="/static/images/default_avatar.png" mode=""></image></view>
				<view class="login-right">
					<view class="login-right-top">请登录</view>
					<view class="login-right-bottom">登录后查看</view>
				</view>
			</view>
			<view class="login" v-else>
				<view class="login-left"><image :src="user.avatar" mode=""></image></view>
				<view class="login-right">
					<view class="login-right-top">{{user.nick_name}}</view>
					<view class="login-right-bottom">免费会员</view>
				</view>
			</view>
			<!-- 我的信息 -->
			<view class="mymessage">
				<view class="mymessage-top">
					<navigator class="mymessage-content" url="/pages/my/order">
						<view class="mymessage-image"><image src="/static/images/icons/member/order.png" mode=""></image></view>
						<view class="mymessage-text">我的订单</view>
					</navigator>
					<navigator class="mymessage-content" url="/pages/my/collect">
						<view class="mymessage-image"><image src="/static/images/icons/member/collect.png" mode=""></image></view>
						<view class="mymessage-text">我的收藏</view>
					</navigator>
					<navigator class="mymessage-content" url="/pages/my/message">
						<view class="mymessage-image"><image src="/static/images/icons/member/message.png" mode=""></image></view>
						<view class="mymessage-text">我的消息</view>
					</navigator>
					<navigator url="/pages/my/VIPCenter" class="mymessage-content">
						<view class="mymessage-image"><image src="/static/images/icons/member/role.png" mode=""></image></view>
						<view class="mymessage-text">会员中心</view>
					</navigator>
				</view>
				<view class="mymessage-bottom" v-if="!user">
					<view class="mymessage-bottom-left"><image src="/static/images/icons/member/role.png" mode=""></image></view>
					<view class="mymessage-bottom-right">登录后查看</view>
				</view>
				<view class="mymessage-bottom" v-else>
					<view class="mymessage-bottom-left"><image src="/static/images/icons/member/role.png" mode=""></image></view>
					<view class="mymessage-bottom-right">开通会员享更多课程特权<text>了解详情</text></view>
				</view>
			</view>
		</view>
		<view class="my-buttom">
			<view class="my-buttom-text">我的课程</view>
			<view class="my-buttom-text">我的邀请</view>
			<view class="my-buttom-text">我的积分</view>
			<view class="my-buttom-text">设置</view>
		</view>
	</view>
</template>

<script>
import { getOpenid } from '@/request/auth.js';
import {getUserInfo} from '@/request/user.js'
export default {
	data() {
		return {
			openid: '',
			user:null
		};
	},
	onShow() {
		this.getUser()
	},
	methods: {
		async getUser(){
			let res = await getUserInfo()
			console.log(res)
			this.user = res.data.data
			console.log(this.user)
		},
		handleLogin() {
			// console.log(1)
			uni.login({
				 success:async(res) =>{
					console.log(res);
					let reslut = await getOpenid({ code: res.code });
					console.log(reslut);
					this.openid = reslut.data.data.openid;
					console.log(this.openid);
					uni.setStorageSync('openid',this.openid)
					uni.navigateTo({
						url:'../auth/auth'
					})
				},
				fail(err) {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="less">
body {
	background-color: #f2f2f2;
}
.my {
	.top-color {
		padding: 30rpx;
		padding-top: 50rpx;
		// height: 650rpx;
		background-image: linear-gradient(#e66465, #9198e5);
		.login {
			display: flex;
			// margin-top: 30rpx;
			.login-left {
				image {
					height: 200rpx;
					width: 200rpx;
					border-radius: 50%;
				}
			}
			.login-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #fff;
				margin-left: 50rpx;
				.login-right-top {
				}
				.login-right-bottom {
					height: 50rpx;
					width: 200rpx;
					text-align: center;
					line-height: 50rpx;
					background-color: #ef8aaa;
					border-radius: 35rpx;
					font-size: 26rpx;
				}
			}
		}
		.mymessage {
			height: 400rpx;
			margin-top: 50rpx;
			background-color: #fff;
			border-radius: 16rpx;
			.mymessage-top {
				height: 300rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.mymessage-content {
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					.mymessage-image {
						image {
							width: 90rpx;
							height: 90rpx;
						}
					}
					.mymessage-text {
						font-size: 26rpx;
					}
				}
			}
			.mymessage-bottom {
				height: 100rpx;
				display: flex;
				background-color: #ffe6b4;
				border-radius: 0 0 16rpx 16rpx;
				align-items: center;
				.mymessage-bottom-left {
					margin-left: 30rpx;
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
				.mymessage-bottom-right {
					color: #d57c1f;
					margin-left: 30rpx;
					font-size: 30rpx;
					text{
						margin-left: 20rpx;
						font-size: 32rpx;
						color: #fff;
						display: inline-block;
						height: 70rpx;
						width: 200rpx;
						line-height: 70rpx;
						text-align: center;
						border-radius: 35rpx;
						background-image: linear-gradient(#eaaf3f, #d78223);
					}
				}
			}
		}
	}
	.my-buttom {
		background-color: #fff;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 26rpx;
		.my-buttom-text {
			margin-left: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
		}
	}
}
</style>
